<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>分类管理</title>
<style type="text/css">
	#edit_div td{
		padding-right:20px;
	}
</style>
</head>
<body>
	<a href="test?action=toDemo">回首页</a></br>
	<button onclick="addCate(1)">添加分类</button>
	<button onclick="cancelSel()">取消复选框-选中</button>
	<table>
		<tr>
			<td>复选</td>
			<td>选择</td>
			<td>分类名称</td>
			<td>分类级别</td>
		</tr>
		<c:forEach items="${requestScope.cates.data }" var="cate1" varStatus="s">
			<tr>
				<td><input checked="" sort="${s.count }" type="checkbox" ></td>
				<td><input type="radio" value="${cate1.id}" name="select" onclick="editCate(${cate1.id},${cate1.type },'${cate1.name }');" /></td>
				<td>${cate1.name }</td>
				<td>${cate1.type }</td>
			</tr>
		</c:forEach>
	</table>
	<hr/>
	<!-- 分类编辑 -->
	<div style="display: none" id="edit_div">
		<table>
			<tr style="display: block">
				<td>分类级别</td>
				<td>
					<select id="cateType" onchange="addCate(this.value)">
						<option >请选择...</option>
						<option value="1">一级</option>
						<option value="2">二级</option>
						<option value="3">三级</option>
					</select>
				</td>
			</tr>
			<tr id="tr_1">
				<td>一级分类</td>
				<td>
					<select id="c1" onchange="selectChange('c2',this.value)">
						<option>请选择...</option>
					</select>
				</td>
			</tr>
			<tr id="tr_2">
				<td>二级分类</td>
				<td>
					<select id="c2">
						<option>请选择...</option>
					</select>
				</td>
			</tr>
			<tr style="display: block">
				<td>分类名称</td>
				<td>
					<input type="text" id="cateName" name="cateName" />
				</td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript">

	//取消复选框-选中
	function cancelSel(){
		for (var i = 1; i < 11; i++) {
			$("input[sort='"+i+"']").prop("checked",false)
		}
	}
	
	//下拉框值改变事件
	function selectChange(selectId, parentId){
		var url="test";
		$.post(url, {"action":"categoryByParentId","id":parentId}, function(data) {
			if (data.code == 0) {
				$("#"+selectId).empty();//首先清空select现在有的内容
                $("#"+selectId).append("<option selected='selected' value=0>请选择..</option>");
                for (var i = 0; i < data.data.length; i++) {
                  var item = data.data[i];
                  $("#"+selectId).append("<option  value=" + item.id + ">" + item.name + "</option>");
                }
			} else {
				alert(data.msg);
			}
		}, 'json'); 
	}
	
	//新增分类
	function addCate(type){
		$("#cateType").attr("disabled",false);
		$("#edit_div").css('display','block');
		$("#cateType").val(type);
		$("#cateName").val("");
		$("input[name=select]").prop("checked",false);//重置radio选中状态
		delSelect();//清空1,2下拉框value
		if(type!=1){
			selectChange("c1",0);
		}
		disSelect(type,0,0);//显示下拉框
	}
	
	//编辑分类
	function editCate(id,type,cateName){
		$("#edit_div").css('display','block'); 
		$("#cateType").val(type);//设置分类级别value
		$("#cateType").attr("disabled",true);//分类级别只读
		$("#cateName").val(cateName);//设置分类名称value
		//根据选中分类id，获取相应父级id填充下拉框
		var c1="",c2="";
		$.post("test", {"action":"getParentIdByCateId","cateId":id}, function(data) {
			if (data.code == 0) {
				c1=data.data.cate1Id;
				c2=data.data.cate2Id;
				// 填充1,2级下拉框value
				fillSelect(data.data1);
				// 显示下拉框
				disSelect(type,c1,c2);
			} else {
				alert(data.msg);
			}
		}, 'json'); 
	}
	
	//清空select
	function delSelect(){
		$("#c1").empty();//首先清空select现在有的内容
        $("#c1").append("<option selected='selected' value=0>请选择..</option>");
        $("#c2").empty();//首先清空select现在有的内容
        $("#c2").append("<option selected='selected' value=0>请选择..</option>");
	}
	
	//填充1,2级下拉框values
	function fillSelect(result){
		delSelect();//清空1,2下拉框value
		for (var i = 0; i < result.length; i++) {
              var item = result[i];
              if(item.type==1){
            	  $("#c1").append("<option value=" + item.id + ">" + item.name + "</option>");
              }else{
            	  $("#c2").append("<option value=" + item.id + ">" + item.name + "</option>");
              }
        }
	}
	
	//1:根据所选分类的级别显示下拉框2:根据c1,c2选中option
	function disSelect(type,c1,c2){
		if(type==1){
			//1,2隐藏
			$("#tr_1").css('display','none');
			$("#tr_2").css('display','none');
		}else if(type==2){
			//2隐藏
			$("#c1").val(c1);
			$("#tr_1").css('display','block');
			$("#tr_2").css('display','none');
		}else if(type==3){
			$("#c2").val(c1);
			$("#c1").val(c2);
			$("#tr_1").css('display','block');
			$("#tr_2").css('display','block');
		}
	}
	
</script>
</html>